<template>
  <div style="display: flex; flex-direction: column; min-height: 100vh">
    <headerLayout/>
    <div class="page-container">
      <router-view v-slot="{ Component, route }">
        <component :is="Component" :key="route.name" />
      </router-view>
    </div>
    <el-backtop :right="20" :bottom="80" style="z-index: 999" />
    <footerLayout v-if="route.name !== 'Home'" />
  </div>
</template>

<script setup>
import headerLayout from './header/index.vue'
import footerLayout from './footer/index.vue'
import _ from 'lodash-es'
import { useLocal } from '@/stores/local'
const store = useLocal()

const route = useRoute()

store.innerWidth = ref(document.documentElement.clientWidth || document.body.clientWidth)

onMounted(() => {
  window.onresize = _.debounce(() => {
    store.innerWidth =
      window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
  }, 200)
})
</script>

<style scoped>
.page-container {
  background: #f5f7fb;
  flex: 1;
}
</style>
